React is the uber popular JavaScript library that is almost everywhere you look these days. Learning React opens up a whole new way to build front-end experiences like websites, mobile apps, and more.
Much has changed since React came out and now is a great time to jump into the React fray. React is mature and has been used across the web in places like Facebook, Instagram, Airbnb, Uber, and much much more. Let's dive in!
For those that want a video walkthrough so you can see every step of the way, check out our React Starter Video!
React is a UI library built by Facebook. React gives us the ability to logically think about our frontend sites and apps.
It’s also a really fun and quick way to build the projects we dream up!
React allows us to build apps that:
React lets us build out our interactive UIs declaratively. One of its greatest abilities is the way it can update our UIs automatically and efficiently whenever our data changes.
Imagine changing a JavaScript variable and immediately seeing it change on your site. Like magic!
In this React Starter, we’ll go through all the bells and whistles of React. We’ll build apps and learn many real-world techniques. This Starter is for anyone that wants to learn React from scratch in a neat and linear path. Follow along and you’ll gain all the React knowledge needed to start building in React.
Building React applications requires very little base knowledge. This is one of its big benefits! It’s very easy to get up and running with React if you’re coming from an HTML/CSS/JS background.
I would recommend having:
Note that in a future article, we’ll go over prerequisite knowledge more in-depth. For this first starter article, let’s just start seeing how we can work in React; then we can take a step back and look further at prerequisites.
There are many many ways to use React in our projects. This is one of the main benefits of React. It isn’t too opinionated about how you should use it. The two main ways to use React are:
Many parts of scotch.io are built using React.
We’ll go over the many ways to use React in following articles. To get us up and running quickly in this article, we’ll be using CodePen. CodePen is an online coding playground where you can very easily play around with HTML/CSS/JS right in your browser. We’ll be using this for our first Starter article since we don’t want to dive into all the installation details just yet.
Give the next few articles a look to see all the ways React can be used including the CLI, create-react-app.
I’ve gone ahead and created a starter CodePen for us to use for this article.
Once you open up this CodePen, you’ll be greeted with a page like this:
Note: Your editor boxes may be on the top or the side. I like mine on the left side. You can change this with the Change View button.
For clarity, I want to let you know everything that went into making this React Starter CodePen. It was 3 quick steps (2 if you don’t count the “Create a CodePen” step):
The main core of React is found in the react.js
script while the things needed to work with React in a browser are in react-dom.js
. These were split apart because React can be used in more places than just the browser. See React Native for an example.
That’s it! That’s how we created this starter CodePen. Your JS settings popup should look like this:
Let’s move forward and start working with React.
React works by taking over an HTML div and injecting JavaScript into it. React will inject all of the awesome cool JavaScript into this section of our site.
We need to create an HTML div and then we can start working with React. In the HTML panel, create a div called root
or app
. Naming it root or app is standard across the React landscape since this is the main div where our React app will take place.
In the HTML section of our CodePen, add:
<div id="root"></div>
That’s all we need in HTML!
Now that we have a div we can target, let’s start writing our JavaScript and our first piece of React code (finally!)
Feel free to collapse the HTML/CSS editors since we won’t need them anymore.
Let’s use React to inject some data into our website.
In the JavaScript section, write the following:
ReactDOM.render( <h1>I AM HERE!</h1>, document.getElementById('root') );
You’ll now have something that looks like this:
By including the react.js
and react-dom.js
scripts, we now have access to the JavaScript objects of React
and ReactDOM
.
ReactDOM.render()
takes two parameters:
Now this app isn’t too useful since you’re not always going to have a site that says I AM HERE.
Let’s grab some data and see how we can add it to our React app.
In JavaScript, let’s create a variable called message
and display that:
const message = 'i am here to save the day!';
Now we can display that in our ReactDOM.render
:
const message = 'i am here to save the day!';ReactDOM.render(
<h1>my message is: {message}</h1>,
document.getElementById(‘root’)
);
We now have this:
Here’s the completed demo for you to take a look at:
We’ve made a React element and shown that in our site now. Moving forward, we’re going to be making React components. Components are a React tool that are made up of elements like <h1>
, <div>
, and more.
Components are the building blocks of sites and apps.
In the simplest terms, a component is comprised of:
By organizing our sites and apps into components, we are able to work with our UI as separate parts. React makes creating components as easy as creating a JavaScript function.
If you look at scotch.io, you can think of the following as components:
By having many components, we can piece together components to make any number of site pages and combinations. Websites and apps are combinations of components. Give Facebook, Google, or Twitter a look and see if you can point out the components on those sites.
Let’s move forward and start creating React components. It’s super easy!
Now you may be wondering how the last example is useful. We have a variable here and have displayed it using React.
While this is a simple example, the truth of today’s websites and applications is that data comes from not just the app itself, but from various sources. You could pull data from:
Managing data from those multiple sources can be tough without a UI library like React. Another big benefit to React is that once we have our data from those sources, we can automagically have the UI updated without any extra code from us. We’ll see exactly what this means soon.
Automatically update our UI whenever data changes. Building dynamic sites is good UI/UX.
If we wanted to update our UI in just plain HTML, we would have to reload the page. That leads to a bad user experience for our users. Imagine if Facebook or Twitter had to update every time new data came in!
Let’s remove the message
variable we made earlier and create a React component using a JavaScript class. Here’s our component:
function App() {
// my component goes here
}
This syntax may look familiar to you. That’s because it’s just a plain old JavaScript function!
Creating React components is as simple as creating a JavaScript function.
Note: React style conventions state that components should be PascalCase. If you had a component that you want to call site header, then the component would be named SiteHeader
.
We’ve created our first React component, but it doesn’t do anything just yet. Like we stated earlier, we are going to have our components a combination of JavaScript and a template. In React, templates are written using JSX.
We’ll cover JSX in more detail in a following article. JSX is a syntax extension to JavaScript, but for this tutorial, just think of JSX as “HTML inside of JavaScript.”
JSX is the templating language that React uses and it can be a little bit of a learning curve to many people trying to learn React.
JSX isn’t that scary. People just aren’t used to seeing the syntax after coming from HTML.
I am a firm believer that writing JSX will make you a better JavaScript developer.
We’re not going to go too far in depth with JSX in this article; JSX deserves its own articles coming up. My recommendation to you if you are wary of JSX is to give it a chance. Hold any judgment until we’ve built a few things and you’ll see it’s not as scary as you may have thought.
Back to our component, let’s add a template.
Components are great conceptually because tying JavaScript to a specific template makes code far more readable and easier to manage, especially in large codebases.
Since this function is a component, where do we put our JavaScript and where do we put our template? In React functional components, we will return our template out of the function:
function App() {
// javascript stuff goes herereturn (
// template goes here
);
}
Now that we know where our template goes, let’s add an <h1>
:
function App() {
// javascript stuff goes herereturn (
<h1>im in a fancy component now!</h1>
);
}
Now that we have this component, we need to tell React to use it.
In React, when you create a component, you will be able to use them as if they were HTML tags in React.
For instance, we created this App
, now we can use it in React as <App />
. Notice that it has a closing forward-slash. When using React components, we need to use some kind of closing tag.
<App />// or
<App></App>
Back in our ReactDOM.render()
, let’s use it:
function App() {
// javascript stuff goes herereturn (
<h1>im in a fancy component now!</h1>
);
}ReactDOM.render(
<App />,
document.getElementById(‘root’)
);
One of the benefits of component based design is that we can keep our code DRY (dont-repeat-yourself). We could even reuse this <App />
component multiple times
ReactDOM.render(
<div>
<App />
<App />
<App />
</div>,
document.getElementById(‘root’)
);
Note: React always wants only 1 parent element when defining a template. This is why we wrapped everything in a single <div>
.
Components are very powerful tools that we can use to build out our websites and apps. Component architecture is everywhere you look in web development these days, whether you’re looking at web components, React, Vue, Angular, and many other frameworks, components are logical ways to split up our applications.
Let’s move forward and work with data in this app.
In the previous example, before we were using components, we created a variable called message
. In components, when you want to create data, you have a couple different options:
state
variableIf you want to update data and have the template show that change automatically, then we will use a React concept called state.
This is how we can recreate the earlier example. The downside to this approach is that whenever we update message
, our template won’t update to show the changes.
function App() {
const message = ‘javascript is so cool’;return (
<h1>{message}</h1>
);
}ReactDOM.render(
<App />,
document.getElementById(‘root’)
);
The problem with using a simple variable like this is that React won’t look to rerender whenever it changes. To be 100% sure that React will update the template with new data, we’ll use a concept called React state.
When we want variable updates to reflect automatically in our template, we want to use React state. Let’s change this example to use React state. Then whenever the message
variable changes, React will re-render our template with the new data.
Let’s write the full syntax here and we’ll talk about what is happening. You may see some JavaScript syntax that you aren’t familiar with called array destructuring.
function App() {
const [message, setMessage] = React.useState(‘javascript is so cool’);return (
<h1>{message}</h1>
);
}
Notice the line that has useState:
const [message, setMessage] = React.useState(‘javascript is so cool’);
This is called array destructuring.
message
setMessage
You can name the variable and the function anything you want. We’re calling it message
and setMessage
because that is what we want our variable to be called.
We’ll talk more about destructuring in an upcoming post about React prerequisites.
Inside of useState()
we can set the default value for our message
variable.
message
variablemessage
variable (setMessage
)message
Whenever we use setMessage to update our message, React will update our views.
Let’s make sure that our setMessage
function is going to work.
Now that we’ve displayed some data, the next step in any app is to listen for user input and act on it. We are going to listen for an event like a button click.
Let’s do a simple action. We’ll:
setMessage
functionWe’ll add the button next to our <h1>
. Remember that React always wants only 1 parent element. We’ll add a surrounding <div>
so that there’s only 1 parent element.
Let’s create a button that when clicked will update our message. Update your App component to have a button that takes a function when clicked:
function App() {
const [message, setMessage] = React.useState(‘javascript is so cool’);return (
<div>
<h1>{message}</h1>
<button>
Update the Message!
</button>
</div>
);
}
In HTML, each element in the DOM can emit events like click
, mouseover
, keypress
, and more.
In order to listen to an event on an element in React, we prepend the event with on
. For instance, if we want to listen for a click
on this button, we will add an attribute for onClick
:
<button onClick={}>Click Me!</button>
In our onClick
, we are using the curly brackets to tell JSX that we need to evaluate what’s in these brackets {}
.
Whenever we open brackets {}, we’re telling React to evaluate this area with JavaScript.
Let’s add a function to our onClick
to make sure we can update our message using setMessage
:
function App() {
const [message, setMessage] = React.useState(‘javascript is so cool’);return (
<div>
<h1>{message}</h1>
<button onClick={() => setMessage(‘my new message’)}>
Update the Message!
</button>
</div>
);
}
Let’s look further at the onClick
handler. In JSX, we will open brackets {}
whenever we want React to evaluate with JavaScript. Since we want to run a function when the button is clicked, we have opened the brackets and given a function.
This could also be written by creating a function outside of our template. The following has the same effect but keeps our template cleaner.
function App() {
const [message, setMessage] = React.useState(‘javascript is so cool’);function handleClick() {
setMessage(‘my new message’)
}return (
<div>
<h1>{message}</h1>
<button onClick={handleClick}>
Update the Message!
</button>
</div>
);
}
Now try clicking your button and seeing the message update automatically!
By using React state, we can easily update variables and have React update our views!
Let’s do a recap to see all the React concepts we’ve touched on:
react.js
and react-dom.js
ReactDOM.render
We’ve covered a lot of the main concepts of React. These foundational concepts will be used in every React app you make in the future!
We’ve only scratched the surface with this Getting Started with React article. Follow along in this React Starter Guide to learn more and more about the world’s most popular JavaScript library.
Throughout this React starter, we’ll go much further in depth and diving into things like:
Originally published by Chris on Code at scotch.io
=======================================================
Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter
☞ Typescript Masterclass & FREE E-Book
☞ React - The Complete Guide (incl Hooks, React Router, Redux)
☞ Modern React with Redux [2019 Update]
☞ The Complete React Developer Course (w/ Hooks and Redux)
☞ React JS Web Development - The Essentials Bootcamp
☞ React JS, Angular & Vue JS - Quickstart & Comparison
☞ The Complete React Js & Redux Course - Build Modern Web Apps
☞ React JS and Redux Bootcamp - Master React Web Development
#reactjs #javascript #web-development