React is a framework that makes it easier to create complex web pages. How does it do that?
Imagine you're developing a to-do app. Let's say you just need to display 4-5 tasks. Ignore functionality like adding, or marking tasks as complete.
If we were to just write some static HTML, the code would look something like this: 
The tasks are included as part of an unordered list, or <ul>.
Each list item <li> contains the title of the task, the date it has been added and the the deadline. So you can see that each item is slightly complex.
Each list item <li> contains the title of the task, the date it has been added and the the deadline. So you can see that each item is slightly complex.
Obviously, in real life, to-do lists aren't just hard-coded HTML. You will need to get the data from somewhere, like an array of JSON objects.
Like this:
Like this:
We would then have to use Javascript in order to display the to-do items in exactly the same format as above.
The code would look something like this:
The code would look something like this:
We can all agree that this looks ugly and nasty. Not what you had in mind when you needed some dynamic data for your website. And it gets worse with more complex pages.
What if we could build complex dynamic user interfaces, but instead of spaghetti JS, we used something close to HTML?
Enter β React!
Enter β React!
React, as mentioned in its own documentation is "a JavaScript library for building user interfaces". And it's an accurate statement. It makes it a lot easier to create complex user interfaces.
But how does it work? How can React make our ugly code above into something clearer and more comprehensive?
In React we can do this:
"Hang on a minute", I hear you say. "Did we just... write simple HTML within Javascript? And then added additional Javascript ONLY when we need it?"
Well, yes we did!
Well, yes we did!
We defined a Javascript function and in that, we just wrote some HTML. And when we needed some more complex functionality, like looping through our to-do list, we just embedded some simple Javascript.
Incredible isn't it?
That's the power of React!
Incredible isn't it?
That's the power of React!
This is how React makes developing complex user interfaces so simple. But that's not all...
React also enables you to tidy up your code. How?
It enables you to break down your page's code into smaller, more manageable chunks!
It enables you to break down your page's code into smaller, more manageable chunks!
Let's say now you're building a portfolio website. You need to include a header, a list of your skills, and a list for your projects. In React, it would look something this:
In React, you can store each of these sections in their own file.
For example, the skills section can be its own file, and it would look like this:
For example, the skills section can be its own file, and it would look like this:
If all of our sections have their own files, we can then import them into our website like this:
Look how clean our code has become!
Each of these sections in their own files is what in React, we call "components".
And even greater, is that we can also separate our CSS, making it much more manageable!
Each of these sections in their own files is what in React, we call "components".
And even greater, is that we can also separate our CSS, making it much more manageable!
Next, you need a package called "create-react-app" which you can get with this command:
npm install -g create-react-app
npm install -g create-react-app
Finally, you can create your first React app with this command:
create-react-app my-app
create-react-app my-app
Now point your terminal inside your app see how your app looks:
cd my-app
npm start
cd my-app
npm start
That's it! Now that you have a basic knowledge of React, you can explore the official docs!
Have fun!
reactjs.org/docs/getting-sβ¦
Have fun!
reactjs.org/docs/getting-sβ¦
β’ β’ β’
Missing some Tweet in this thread? You can try to
force a refresh
γ
