React, a JavaScript library that is popular in the development industry, simplifies the process of building an interactive user interface, and its scope of application covers web pages, mobile terminals and desktop platforms. Many companies around the world, including giants such as Netflix and Airbnb, are using React.
This guide will take you to get started with React quickly and explain its core concepts. We will use the Create React App tool to quickly build a project and gradually build a simple React application. After the study, you will master the basics of React and be prepared for further study.
Before learning React, it is best to have the basic knowledge of HTML, CSS and JavaScript. Understanding Node.js and npm package managers can also help with learning.
This tutorial requires installing Node and npm on your machine. You can access the Node.js download page to download the required version (npm is bundled with Node). Alternatively, you can refer to our tutorial to install Node using version manager.
React is a JavaScript library for building UI components. Unlike more complete frameworks like Angular or Vue, React only handles view layers, so you need other libraries to handle routing, state management and more. This guide will focus on React's out-of-the-box features.
React applications are built using reusable UI components that can interact with each other. React components can be class-based components or so-called functional components. Class-based components are defined using ES6 class, while function components are basic JavaScript functions. These functions are usually defined using arrow functions, but the function keyword can also be used. A class-based component will implement a render function that returns some JSX (a extension of React to regular JavaScript to create React elements), while the function component will return JSX directly. If you've never heard of JSX, don't worry, we'll go into more detail later.
React components can also be divided into stateful components and stateless components. The job of a stateless component is simply to display the data it receives from the parent React component. If it receives any events or input, it can simply pass those events or inputs to its parent component to handle.
On the other hand, the stateful component is responsible for maintaining a certain application state. This may involve getting data from external sources, or tracking whether the user is logged in. Stateful components can update their status in response to events and inputs.
According to experience, you should write stateless components as much as possible. These components are easier to reuse in your applications and other projects.
Before you start coding, you need to know that React uses a virtual DOM to handle page rendering. If you are familiar with jQuery, you know it can manipulate web pages directly through HTML DOM. In many cases, this direct interaction has little to no problem. However, for some cases, such as running a highly interactive real-time web application, performance can be greatly affected.
To solve this problem, a virtual DOM (memory representation of real DOM) was invented, which is currently used by many modern UI frameworks (including React). Unlike HTML DOM, virtual DOM is easier to operate and can handle a large number of operations in milliseconds without affecting page performance. React regularly compares virtual DOM and HTML DOM. The difference is then calculated and applied to the HTML DOM to match it with the virtual DOM. This way, React ensures that your application renders at a steady 60 frames per second, meaning that users experience almost no delay.
Based on the prerequisites, I assume you have set up the Node environment and have the latest version of npm (or optional Yarn) installed.
Next we will use the Create React App to build our first React app, an official utility script for creating a single page React app.
Let's install it now:
<code>npm i -g create-react-app</code>
Then use it to create a new React app.
<code>create-react-app message-app</code>
Depending on your internet connection speed, if this is your first time running the create-react-app command, this may take a while to complete. There are many packages installed in the process that are necessary to set up a convenient development environment—including web servers, compilers, and test tools.
If you don't want to install too many packages globally, you can also use npx, which allows you to download and run the package without installing it:
<code>npx i -g create-react-app</code>
Running either of these two commands should output something like the following:
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>After the project setup process is completed, execute the following command to start your React application:
<code>cd message-app npm start</code>
You should see the following output:
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
Your default browser should start automatically, you should see a screen like this:
Now that we have confirmed that our introductory React project runs without errors, let's see what's going on behind the scenes. You can open the folder message-app using your favorite code editor. Let's start with the package.json file:
<code>npm i -g create-react-app</code>
As you can see, the Create React App has installed several dependencies for us. The first three are related to the React test library, which (as you might guess) enables us to test our React code. Then we have react and react-dom, which is the core package for any React application and finally react-scripts, which sets up the development environment and starts the server (you've just seen it).
Then there are four npm scripts for automating repetitive tasks:
The last command is worth explaining in detail. The Create React App tool provides a clear distinction between your actual code and your development environment. If you run npm run eject, the Create React App stops hiding what it does behind the scenes and dumps everything into the project's package.json file. While this gives you more granular control over your application's dependencies, I recommend you not to do this, as you have to manage all the complex code used in your build and test projects. If you want, you can use customize-cra to configure the build process without popping up.
Create React App also supports ESLint (as can be seen from the eslintConfig property) and is configured using react-app ESLint rules.
The browserslist property of thepackage.json file allows you to specify a list of browsers that the application will support. This configuration is used by converters such as PostCSS tools and Babel.
One of the coolest features of the Create React App is that it provides hot reloading out of the box. This means that any changes we make to the code will cause the browser to refresh automatically. Changes to JavaScript code will reload the page, while changes to CSS will update the DOM without reloading.
Now, let's stop the development server first by pressing Ctrl C. After the server is stopped, delete everything except the serviceWorker.js and setupTests.js files in the src folder. If you are interested in understanding the role of service workers, you can learn more here.
Other that, we will create all the code from scratch so that you can understand everything in the src folder.
React documentation defines JSX as a "grammatical extension for JavaScript" which makes it easy to write React components. With JSX, we can pass HTML structures or React elements like we do with standard JavaScript values.
This is a simple example:
<code>create-react-app message-app</code>
Pay attention to this lineconst message = <h1>I'm a heading</h1>;. This is JSX. If you try to run it in a web browser, it will give you an error. However, in React applications, JSX is interpreted by a converter (such as Babel) and rendered as JavaScript code that React can understand.
Note: You can learn more about JSX in our tutorial "Beginner of JSX".
In the past, React JSX files used to use the .jsx file extension. Now, the Create React App tool generates React files using the .js file extension. While the .jsx file extension is still supported, React maintainers recommend using .js. However, there is also a group of opposing React developers (myself included) who prefer to use the .jsx extension for the following reasons:
However, in this tutorial, I will follow what the Create React App provides and stick to the end of the .js file.
Let's start writing some code. In the src folder of the newly created message-app, create an index.js file and add the following code:
<code>npm i -g create-react-app</code>
Use npm start or yarn start again to start the development server. Your browser should display the following:
This is the most basic "Hello World" React example. The index.js file is the root directory of the project, where the React component will be rendered. Let me explain how the code works:
<h1>Hello World</h1>: A JSX element document.getElementById('root'): An HTML container (the JSX element will be rendered here). HTML container is located in the public/index.html file. On line 31, you should see <div></div>. This is called the root DOM node, because everything in it will be managed by the React virtual DOM.
While JSX looks a lot like HTML, there are some key differences. For example, you cannot use the class attribute because it is a JavaScript keyword. Instead, use className instead. Additionally, events like onclick are spelled onClick in JSX. Now let's modify our Hello World code:
<code>npm i -g create-react-app</code>
I have moved my JSX code into a constant variable called element. I also replaced the h1 tag with the div tag. In order for JSX to work, you need to wrap the elements in a parent tag.
Look at the following example:
<code>create-react-app message-app</code>
The above code does not work. You will receive a syntax error indicating that you must include adjacent JSX elements in the enclosed tag. Like this:
<code>npx i -g create-react-app</code>
How to calculate JavaScript expressions in JSX? Very simple. Just use curly braces as follows:
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>…or like this:
<code>cd message-app npm start</code>
Update your code and confirm that the browser displays "Hello, Jane Doe". Try other examples, such as {5 2}<code>{5 2}. Now that you have the basics of JSX, let's go ahead and create a React component.
The above example is an easy way to show you how ReactDOM.render() works. Typically, we encapsulate all project logic in a React component and pass it to the ReactDOM.render function.
In the src folder, create a file named App.js and type the following code:
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
Here, we create a React component by defining a JavaScript class, which is a subclass of React.Component. We also define a render function that returns a JSX element. You can put other JSX code in the <div><code><div> tag. Next, update src/index.js with the following code to see the reflected changes in your browser:
<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}</pre><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div><div class="contentsignin">Copy after login</div></div>
<p>First, we import the App component. Then we render the App in JSX format as follows: <code><App/><code><App/>. This is required so that JSX can compile it into an element that can be pushed to the React DOM. After saving the changes, check your browser to make sure it renders the correct message.
Next, we will learn how to apply styles.
There are various ways to style React components. In this tutorial, we will introduce two methods:
The following is an example of how we implement JSX inline style:
import React from 'react';
export default function App() {
const message = <h1>I'm a heading</h1>; //JSX FTW!
return ( message );
}React styles look a lot like regular CSS, but there are some key differences. For example, headerStyle is an object literal. We cannot use semicolons as we normally do. Additionally, many CSS declarations have been changed to make them compatible with JavaScript syntax. For example, we use textDecoration instead of text-decoration. Basically, camel nomenclature is used for all CSS keys, except for vendor prefixes such as WebkitTransition, which must start with capital letters.
We can also implement the style in this way:
<code>npm i -g create-react-app</code>
The second method is to use an external stylesheet. By default, external CSS stylesheets are already supported. If you want to use a preprocessor like Sass, consult the documentation to learn how to configure it.
In the src folder, create a file named App.css and type the following code:
<code>create-react-app message-app</code>
Add the following import statement at the top of the src/App.js file:
<code>npx i -g create-react-app</code>
After saving, you should see a huge change in the text content size on your browser. You can also use CSS classes as follows:
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>Update src/App.js as follows:
<code>cd message-app npm start</code>
We cannot use the class attribute of HTML because it is a reserved JavaScript keyword. Instead, we use className. Here is the output you expected:
Now that you have learned how to add styles to your React project, let's continue to learn stateless and stateful React components.
Stateless component, also known as dumb component, is just a component that displays information. It does not contain any logic for operating data. It can receive events from the user and then pass them to the parent container for processing.
Create the file message-view.js and copy the following sample code into it. Here is a perfect example of a dumb component (although technically it's more like a static component):
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
Next, use the following code to add some basic styles to src/App.css:
{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}Finally, modify src/App.js so that the entire file looks like this:
import React from 'react';
export default function App() {
const message = <h1>I'm a heading</h1>; //JSX FTW!
return ( message );
}The code should be very easy to understand so far, as I have explained the concepts involved so far. Now check your browser and you should get the following results:
We mentioned earlier that React provides both class-based and function-based components. We can rewrite the MessageView using function syntax as follows:
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello World</h1>, document.getElementById('root'));Note that I have removed the Component import because it is not needed in the function syntax. This style may be confusing at first, but you will soon learn that writing React components is faster.
In addition, with the emergence of React Hooks, this style of writing React components has become increasingly popular.
You have successfully created a stateless React component. However, it's not complete, as it requires some extra work to properly integrate with stateful components or containers. Currently, MessageView displays static data. We need to modify it so that it can accept input parameters. We use so-called props to achieve this - the data we will pass from the parent component.
First, change the MessageView component like this:
<code>npm i -g create-react-app</code>
The main thing to note here is how we define message variables. We assign it to this.props.message and we pass it down from the stateful parent component. Then, in our JSX, we can reference our message variable and output it to the page.
Now let's create a parent component for the MessageView. Create a new file named message-list.js and add the following code:
<code>create-react-app message-app</code>
Here, we use state to store an object containing our message. The magic of React is that when the state object changes, the component will be re-rendered (and thus update the UI).
Then, in our JSX, we pass the message property of the state object to the MessageView component.
The last step is to update our App component to render a new stateful MessageList component instead of the stateless MessageView component:
<code>npx i -g create-react-app</code>
After saving the changes, check your browser to view the results.
Take a moment to make sure you understand what is going on. We declare a state object in the (stateful) MessageList component. The message property of this object contains our message. In our render function we can pass that message to our (stateless) child components using so-called props.
In the (stateless) MessageView component, we can access the message using this.props.message. We can then pass this value to our JSX to render to the page.
Huh!
As the application grows and the data is passed back and forth as props, it will be useful to verify that the components receive the data type they expect.
Luckily, we can use the prop-types package to achieve this. To quickly see its actual example, change our MessageView component as follows:
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>If the message prop is missing, this will cause your React application to report an error. If the object received by the component is not an object, it will also cause an error.
You can try by changing the state of the parent component like this:
<code>cd message-app npm start</code>
Go back to your browser and open the console. You should see the following documented in the console:
<code>.... Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.56.1:3000 Note that the development build is not optimized. To create a production build, use yarn build.</code>
Now let's see how to display multiple messages using MessageView instance. This is where React starts to flash because it makes code reuse very easy (you will see).
First, we change state.message to array and rename it to messages. We will then use JavaScript's map function to generate multiple MessageView component instances, each corresponding to a message in the state.messages array.
We also need to fill a unique value with a special attribute called key, such as id. React requires this to track which items in the list have been changed, added, or deleted.
Update the MessageList code as follows:
{
"name": "message-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}Check your browser to see the results:
As you can see, it is easy to define building blocks with React to create a powerful and complex UI interface.
Hooks are the latest version of React, but they are sweeping the React world. Simply put, they make it possible to add state (and other functions) to React function components.
I will end this tutorial by refactoring the MessageView component into a function component, which manages its state using React Hooks. Please note that it is only possible when using React v16.8 and later.
<code>npm i -g create-react-app</code>
In the example above, I have replaced the state object with the useState React Hook. As the name implies, this allows you to manage the state of components.
Using Hooks will help you avoid so-called prop drilling when working on large projects. Prop drilling will let you pass props to multiple components (which ultimately don't need that data), just to get to a deeply nested component.
We can also convert the MessageView component to a function component:
<code>create-react-app message-app</code>
Note how we now receive message prop in the component:
<code>npx i -g create-react-app</code>
This utilizes a technique called object destruction, which allows you to extract individual items from an array or object and put them into variables using abbreviated syntax.
We are using the same technique here, getting the values we need from the message object and avoiding adding message to everything:
<code>...
Success! Created react-app at C:\Users\mike\projects\github\message-app
Inside that directory, you can run several commands:
yarn start
Starts the development server.
yarn build
Bundles the app into static files for production.
yarn test
Starts the test runner.
yarn eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd message-app
yarn start
Happy hacking!</code>That's it!
I don't intend to introduce React Hooks further in this post, just let you know that they exist and that they are becoming more and more popular in the React community. If you want to learn more about Hooks, read our Getting Started Guide to React Hooks.
This is a live demonstration you can use:
We have now completed this introductory guide. There are many React concepts I do not cover, such as data acquisition, error handling, routing, usage form, debugging, etc. The list continues...
The good news is that we have a lot of great React content on SitePoint Premium, as well as many great articles on our blog. I encourage you to check them out and build something great.
Before starting to learn React, it is very important to master solid JavaScript knowledge, because React is a JavaScript library. You should be familiar with concepts such as ES6 features, closures, asynchronous programming and this keywords. HTML and CSS knowledge are also essential, as you will use JSX, a JavaScript syntax extension similar to HTML. It is also beneficial to be familiar with Node.js and npm (Node package manager) as they are commonly used for package management and execution scripts in React development.
To set up a development environment for React, you first need to install Node.js and npm. After the installation is complete, you can create a new React application using the Create React App command line tool. It sets up your development environment so that you can use the latest JavaScript features, provide a good development experience, and optimize your applications for production. You also need a text editor such as Visual Studio Code and a web browser to test your application.
JSX stands for JavaScript XML. It is a JavaScript syntax extension developed by Facebook, allowing us to write HTML in React. JSX makes it easier to write and add HTML in React. Without it, your JavaScript code will be difficult to read and write. It also helps make the code modular and easier to understand and maintain.
Components are building blocks for any React application. A component in React is a reusable piece of code that controls part of the UI. Each component is independent and can be combined to create complex UIs. React components are usually written in JSX and can maintain their own state and props.
In React, state and props are JavaScript objects. Although they both hold information that affects the render output, they do differently when it comes to components. Props (abbreviation of properties) is a way to pass data from parent components to child components. They are read-only and should not be changed by child components. On the other hand, state is managed inside the component and can be changed inside the component.
React events are named using camelCase, not lowercase. When using JSX, you pass the function as an event handler, not a string. For example, the HTML click event is written as onClick in JSX. React also has a synthetic event system, which means it has its own event system, which is fully compatible with the W3C event system.
The keys in React are used to identify the unique virtual DOM element of their corresponding driver rendering data. They help React optimize rendering by looping through existing DOM elements. The key must be a unique number or string, and using duplicate keys can break your application.
Context API is a component structure provided by React that enables us to share specific forms of data at all levels of our application. Its goal is to solve the problem of prop drilling.
Redux is a predictable state container designed to help you write JavaScript applications that run consistently on clients, servers, and native environments and are easy to test. While it is primarily used as a state management tool for React, you can use it with any other JavaScript framework or library.
Hooks is a new feature in React 16.8 that allows you to use state and other React features without writing classes. Hooks are functions that allow you to "hook into" React state and lifecycle functions from function components. They don't work in classes - they allow you to use React without classes.
Please note that the above content has rewritten and polished the original text, striving to improve readability and fluency without changing the original meaning. The image format remains the same. Since the network pictures cannot be accessed directly, the image link remains the same.
The above is the detailed content of Getting Started with React: A Beginner's Guide. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
