Instead, I focused on just learning vanilla JavaScript and working with jQuery in a professional setting. After a few frustrated, failed attempts to get started with React, I finally started to get it, and I began to see why I might want to use React instead of vanilla JS or jQuery.<\/p>\n\n\n\n
I tried to condense everything I’ve learned into a nice introduction to share with you, so here it is.<\/p>\n\n\n\n
<\/p>\n\n\n\n
PREREQUISITES<\/h6>\n\n\n\n
There are a few things you should know in advance before you start playing around with React. If you’ve never used JavaScript or the DOM at all before, for example, I would get more familiar with those before trying to tackle React.<\/p>\n\n\n\n
Here are what I consider to be React prerequisites.<\/p>\n\n\n\n
- Basic familiarity with HTML & CSS<\/a>.<\/li>
- Basic knowledge of JavaScript<\/a> and programming.<\/li>
- Basic understanding of the DOM<\/a>.<\/li>
- Familiarity with ES6 syntax and features<\/a>.<\/li>
- Node.js and npm<\/a> installed globally.<\/li><\/ul>\n\n\n\n
<\/p>\n\n\n\n
GOALS<\/h6>\n\n\n\n
- Learn about essential React concepts and related terms, such as Babel, Webpack, JSX, components, props, state, and lifecycle.<\/li>
- Build a very simple React app that demonstrates the above concepts.<\/li><\/ul>\n\n\n\n
Here’s the source and a live demo of the end result.<\/p>\n\n\n\n
- View Source on GitHub<\/a><\/li>
- View Demo<\/a><\/li><\/ul>\n\n\n\n
<\/p>\n\n\n\n
What is React?<\/h6>\n\n\n\n
- React is a JavaScript library – one of the most popular ones, with over 100,000 stars on GitHub<\/a>.<\/li>
- React is not a framework (unlike Angular, which is more opinionated).<\/li>
- React is an open-source project created by Facebook.<\/li>
- React is used to build user interfaces (UI) on the front end.<\/li>
- React is the view<\/strong> layer of an MVC application (Model View Controller)<\/li><\/ul>\n\n\n\n
One of the most important aspects of React is the fact that you can create components<\/strong>, which are like custom, reusable HTML elements, to quickly and efficiently build user interfaces. React also streamlines how data is stored and handled, using state<\/strong> and props<\/strong>.<\/p>\n\n\n\n
We’ll go over all of this and more throughout the article, so let’s get started.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Setup and Installation<\/h6>\n\n\n\n
There are a few ways to set up React, and I’ll show you two so you get a good idea of how it works.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Static HTML File<\/h6>\n\n\n\n
This first method is not a popular way to set up React and is not how we’ll be doing the rest of our tutorial, but it will be familiar and easy to understand if you’ve ever used a library like jQuery, and it’s the least scary way to get started if you’re not familiar with Webpack, Babel, and Node.js.<\/p>\n\n\n\n
Let’s start by making a basic
index.html<\/code> file. We’re going to load in three CDNs in thehead<\/code> – React, React DOM, and Babel. We’re also going to make adiv<\/code> with an id calledroot<\/code>, and finally we’ll create ascript<\/code> tag where your custom code will live.<\/p>\n\n\n\n<\/p>\n\n\n\n
index.html<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" \/>\n\n <title>Hello React!<\/title>\n\n <script src=\"https:\/\/unpkg.com\/react@^16\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@16.13.0\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.js\"><\/script>\n <\/head>\n\n <body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n \/\/ React code will go here\n <\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nI’m loading in the latest stable versions of the libraries as of the time of this writing.<\/p>\n\n\n\n
- React<\/a> – the React top level API<\/li>
- React DOM<\/a> – adds DOM-specific methods<\/li>
- Babel<\/a> – a JavaScript compiler that lets us use ES6+ in old browsers<\/li><\/ul>\n\n\n\n
The entry point for our app will be the
root<\/code> div element, which is named by convention. You’ll also notice thetext\/babel<\/code> script type, which is mandatory for using Babel.<\/p>\n\n\n\nNow, let’s write our first code block of React. We’re going to use ES6 classes to create a React component called
App<\/code>.<\/p>\n\n\n\nindex.html<\/p>\n\n\n\n
class App extends React.Component {\n \/\/...\n}<\/code><\/pre>\n\n\n\nNow we’ll add the
render()<\/code><\/a> method, the only required method in a class component, which is used to render DOM nodes.<\/p>\n\n\n\nindex.html<\/p>\n\n\n\n
class App extends React.Component {\n render() {\n return (\n \/\/...\n );\n }\n}<\/code><\/pre>\n\n\n\nInside the
return<\/code>, we’re going to put what looks like a simple HTML element. Note that we’re not returning a string here, so don’t use quotes around the element. This is calledJSX<\/code>, and we’ll learn more about it soon.<\/p>\n\n\n\nindex.html<\/p>\n\n\n\n
class App extends React.Component {\n render() {\n return <h1>Hello world!<\/h1>\n }\n}<\/code><\/pre>\n\n\n\nFinally, we’re going to use the React DOM
render()<\/code> method to render theApp<\/code> class we created into theroot<\/code> div in our HTML.<\/p>\n\n\n\nindex.html<\/p>\n\n\n\n
ReactDOM.render(<App \/>, document.getElementById('root'))<\/code><\/pre>\n\n\n\nHere is the full code for our
index.html<\/code>.<\/p>\n\n\n\nindex.html<\/p>\n\n\n\n
<!DOCTYPE html>\n<html>\n <head>\n <meta charset=\"utf-8\" \/>\n\n <title>Hello React!<\/title>\n\n <script src=\"https:\/\/unpkg.com\/react@16\/umd\/react.development.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@16\/umd\/react-dom.development.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/babel-standalone@6.26.0\/babel.js\"><\/script>\n <\/head>\n\n <body>\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n class App extends React.Component {\n render() {\n return <h1>Hello world!<\/h1>\n }\n }\n\n ReactDOM.render(<App \/>, document.getElementById('root'))\n <\/script>\n <\/body>\n<\/html><\/code><\/pre>\n\n\n\nNow if you view your
index.html<\/code> in the browser, you’ll see theh1<\/code> tag we created rendered to the DOM.<\/p>\n\n\n\n![\"Screen](\"https:\/\/www.taniarascia.com\/static\/deb38c3270204d12d046797731ce7ee8\/5a190\/Screen-Shot-2018-08-18-at-10.34.09-AM.png\")
<\/figure>\n\n\n\nCool! Now that you’ve done this, you can see that React isn’t so insanely scary to get started with. It’s just some JavaScript helper libraries that we can load into our HTML.<\/p>\n\n\n\n
We’ve done this for demonstration purposes, but from here out we’re going to use another method: Create React App.<\/p>\n\n\n\n
<\/p>\n\n\n\n
Create React App<\/h6>\n\n\n\n
The method I just used of loading JavaScript libraries into a static HTML page and rendering the React and Babel on the fly is not very efficient, and is hard to maintain.<\/p>\n\n\n\n
Fortunately, Facebook has created Create React App<\/a>, an environment that comes pre-configured with everything you need to build a React app. It will create a live development server, use Webpack to automatically compile React, JSX, and ES6, auto-prefix CSS files, and use ESLint to test and warn about mistakes in the code.<\/p>\n\n\n\n
To set up
create-react-app<\/code>, run the following code in your terminal, one directory up from where you want the project to live.<\/p>\n\n\n\nnpx create-react-app react-tutorial<\/code><\/pre>\n\n\n\nOnce that finishes installing, move to the newly created directory and start the project.<\/p>\n\n\n\n
cd react-tutorial && npm start<\/code><\/pre>\n\n\n\nOnce you run this command, a new window will popup at
localhost:3000<\/code> with your new React app.<\/p>\n\n\n\n![\"Screen](\"https:\/\/www.taniarascia.com\/static\/1c5a36e06f57edfc718276e9ddf9a9c1\/5a190\/Screen-Shot-2018-08-18-at-11.37.59-AM.png\")
<\/figure>\n\n\n\nCreate React App is very good for getting started for beginners as well as large-scale enterprise applications, but it’s not perfect for every workflow. You can also create your own Webpack setup for React.<\/p>\n\n\n\n
If you look into the project structure, you’ll see a
\/public<\/code> and\/src<\/code> directory, along with the regularnode_modules<\/code>,.gitignore<\/code>,README.md<\/code>, andpackage.json<\/code>.<\/p>\n\n\n\nIn
\/public<\/code>, our important file isindex.html<\/code>, which is very similar to the staticindex.html<\/code> file we made earlier – just aroot<\/code> div. This time, no libraries or scripts are being loaded in. The\/src<\/code> directory will contain all our React code.<\/p>\n\n\n\nTo see how the environment automatically compiles and updates your React code, find the line that looks like this in
\/src\/App.js<\/code>:<\/p>\n\n\n\nTo get started, edit `src\/App.js` and save to reload.<\/code><\/pre>\n\n\n\n - React DOM<\/a> – adds DOM-specific methods<\/li>
- View Demo<\/a><\/li><\/ul>\n\n\n\n
- View Source on GitHub<\/a><\/li>
- Basic knowledge of JavaScript<\/a> and programming.<\/li>
![\"Screen](\"https:\/\/www.taniarascia.com\/static\/888c5b815dcc80ec278cc2c46b563afc\/5a190\/Screen-Shot-2018-08-18-at-3.45.11-PM.png\")
<\/figure>\n\n\n\n![\"Screen](\"https:\/\/www.taniarascia.com\/static\/2b0e0f127e4d959b70f8d325f368f196\/5a190\/Screen-Shot-2018-08-18-at-6.10.55-PM.png\")
<\/figure>\n\n\n\n![\"Screen](\"https:\/\/www.taniarascia.com\/static\/4a473290bef5435fb9aa878316de06ef\/5a190\/Screen-Shot-2018-08-19-at-5.43.39-PM.png\")
<\/figure>\n\n\n\n