React Hello World example
react
38
Male avatar

loveprogramming viết ngày 20/05/2021

https://grokonez.com/frontend/react/react-helloworld-example

React Hello World example

In this tutorial, we're gonna look at how to create a simple React Hello World Application in NodeJs runtime, Yarn dependency management and Babel transpiler.

I. Set up Environment

1. Install Node.js

Go to NodeJs website, download and install it on your PC.
You can check if the process finished with cmd:


> node -v
v6.11.2

2. Install Yarn

Yarn is a package management in your web projects. It is fully backward compatible with the npm package manager structure (package.json and node_modules).

To install Yarn, run this cmd: npm install -g yarn
Then check Yarn version to determine that the installation is successful.


> yarn -v
1.5.1

3. Install Babel CLI

Babel is a transpiler for JavaScript, it can turn JSX into React function calls.
For example:

var template = <p id='tempId'>Java Technology - Spring Framework</p>;

will be translated into:


var template = React.createElement(
  'p',
  { id: 'tempId' },
  'Java Technology - Spring Framework'
);

To install Babel, run this cmd: npm install -g babel-cli@6.24.1.
Then add Babel to Yarn: yarn global add babel-cli:

react-hello-world-example-yarn-add-babel

II. React Hello World Example

1. Technologies

  • React 16
  • NodeJs 6.11.2
  • NPM 3.10.10
  • Yarn 1.5.1
  • Babel 6.24.1

More at:

https://grokonez.com/frontend/react/react-helloworld-example

React Hello World example

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
Bài viết liên quan
White
19 3
(Link) (Link) &mdash; tracks device battery state. (Link) (Link) &mdash; tracks geo location state of user's device. (Link) (Link) &mdash; tr...
Đinh Viễn viết 2 năm trước
19 3
Male avatar
0 0
https://grokonez.com/frontend/react/getparamfromurledititemformreactreduxexample Get Param from Url & create Edit Item Form – reactredux example ...
loveprogramming viết 5 tháng trước
0 0
Male avatar
0 0
https://loizenai.com/springbootreactdynamodbcrudexample/ SpringBoot React DynamoDB CRUD Example Tutorial: SpringBoot React DynamoDB Build CRUD Ap...
loveprogramming viết 4 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!