Wednesday, 6 February, 2019 UTC
Summary
From the first time Facebook was released in 2013, React.js has been growing strongly. This is the fifth most introduced open source project on Github. React is a neat JavaScript framework for building user interfaces – most notable examples are Facebook and Instagram.
React is also a tool that can replace MVC frameworks, like Angular or
Backbone, with a clearer structure and focus on performance
optimization. In this article, we will introduce you to a set of developer toolskit to help you set foot in React programming ground.
Official React.js documentation from Facebook
Facebook gives developers a detailed set of key concepts in React. Besides documents, you can also find a lot of instructions for this tool, and one Private forum for React programmers. Since this document is open source, you can edit them if you want.
React.js Github repo
In React Github repo, you can always preview React source code whenever you need it. If you want to keep up to date with the current state of the tool’s development, you can also look at issues, milestones, and latest pull requests. If “know how”, you can also study the Trouble Shooting Guide a bit.
Hello World starter code
If you want to try React quickly, you can start with this interactive “Hello World” demo on Codepen. Demo includes all the necessary resources and even starter code. With the introduction of Babel , you can use both ECMAScript 6 and JSX syntax. Just fork this pen, and you can work straight through a circuit without having to manually set up the environment.
React Starter Kit
The React Starter Kit is isomorphic web app boilerplate developed from Node.js, Express, GraphQL, React, and a variety of other web development tools, like Webpack, Babel, and Browsersync. The tool gives you the same technology platform for frontend stack Facebook and lets you jump right into programming React full-stack without having too much trouble.
ReactCSS
ReactCSS helps you add inline CSS styles in JavaScript. ReactCSS has support for React, Redux , React Native (framework to build native mobile apps with React), autoprefixing, hover, pseudo-elements, and media queries. You can quickly install npm.
React JSFiddle integration (yes and no JSX)
This is a great playground for those who are practicing with React. React JSFiddle integration is hosted on JSFiddle, and there are two versions: one with JSX and one without JSX , choose which version is right for you.
React style guide generator
Can quickly create style guide for your React project with this easy-to-use React style guide generator. You just add a bit of doc to the file, and the generator will take care of it all. The tool comes with detailed file readme.
Belle configurable React components
Belle is the React component library that equips you with a set of
React components that can be applied to your project, like “Button”,
“Card”, “Spinner”, “Toggle”, “Rating”, various components, …
Customized components, and works on both mobile and desktop.
Belle is not the only React component library for you, you can find a lot of libraries or on Github, like React widgets or Elemental .
React Storybook UI Development Environment
If you don’t use other people’s component libraries but want to build your own, you should try React StoryBook , UI development environment for React components. Storybook allows you to develop components interactively. The tool comes with elaborate documentation , and you can start the development process in the Storybook Hub .
React-Bootstrap
React-Bootstrap integrates Bootstrap 3 powerful frontend framework into React. The development team basically rebuilt Bootstrap components with React.js. Since then, the development of base code is cleaner, less repetitive, and higher performance.
Note that this repo is still under development, and the API will change in the future. To see the current development situation, check out the project roadmap .
React Developer Tools for Chrome
React DevTools for Chrome is an extension for Chrome Developer Tools and allows you to check the level of the component. Facebook built tool with an effort to support the new React application developer community. You simply need to add the tool as an extension to your browser. Source code of source code is continuously updated on Github.
React Developer Tools for Firefox
This is the React Developer Tools set by Facebook specifically for
Firefox, this add-on is similar to the utility (near) with the same name
for Chrome.
React.js Package for Atom
With Atom React this package, you can add React support to your Atom code editor. The tool has features to highlight syntax, autocomplete, code snippets, convert HTML to JSX, …
React.js Fundamentals – free online course
There are quite a few good courses and keep teaching you how to program with React. However, with React.js Fundamentals key, you will learn completely for free. The course consists of 12 lessons, starting with basics of React, with a science curriculum covering almost all important knowledge.
Source: https://techtalk.vn/react-js-14-tools-tai-nguyen-lap-trinh-web.html
Share This:
The post React.js: 14 Tools & Web Programming Resources appeared first on FrontNet Blog.