React.js: 14 Tools & Web Programming Resources

0

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.

Official Facebook Docs

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.

Official Github repo

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.

react starter kit

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 CSS

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.

jsfiddle integration

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.

React Style Guide Generator

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 .

Belle components

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 .

Storybook

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 Bootstrap

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.

Chrome devtools

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.

Firefox devtools

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, …

Atom React support

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.

Reactjs Fundamentals

Source: https://techtalk.vn/react-js-14-tools-tai-nguyen-lap-trinh-web.html

Share This:

Leave A Reply

%d bloggers like this:

Powered by FrontNet