Skip to content

Create a new react app #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
90fa549
Fix typo
Ediiik Jan 20, 2018
984abd2
Fix typo
Jul 9, 2018
a531a0f
Small typo fix
tusharkhatiwada Oct 26, 2018
b3d1503
fix typo in blog post
natusaspire Jan 12, 2019
d8a8309
Typo fix
Jan 16, 2019
573da86
Add https for javascript.info
Feb 6, 2019
7e4ac52
HTTPS-ify most insecure URLs in content/docs (& one in Acknowledgments)
mgol Feb 7, 2019
48b5ea0
Adding first two steps
marcinostrouch Feb 16, 2019
4438c53
Review lines 1-90
marcinostrouch Feb 18, 2019
1ce47dd
Removing Polish translation of JSON data
marcinostrouch Feb 18, 2019
2577d15
Finishing step 3
marcinostrouch Feb 18, 2019
5aa1a31
Adding Step 4
marcinostrouch Feb 18, 2019
1e2eee0
Adding Step 5
marcinostrouch Feb 18, 2019
abfd9c2
Adding minor corrections
marcinostrouch Feb 18, 2019
c8f6bd2
Adding intro
marcinostrouch Feb 19, 2019
9c18500
Adding Zalecane zestawy
marcinostrouch Feb 19, 2019
ff3e846
Adding deleted link
marcinostrouch Feb 19, 2019
612f619
Adding Create React App
marcinostrouch Feb 19, 2019
b034903
Finishing with Create React App
marcinostrouch Feb 19, 2019
12cde9a
Adding Next.js
marcinostrouch Feb 21, 2019
e13935a
Adding Gatsby
marcinostrouch Feb 21, 2019
9278f6c
Adding Neutrino and nwb
marcinostrouch Feb 21, 2019
324cf1c
Adding Parcel
marcinostrouch Feb 21, 2019
643733b
Adding Razzle
marcinostrouch Feb 21, 2019
057d0b8
Adding Creating a Toolchain from Scratch
marcinostrouch Feb 21, 2019
463ce0c
Pre-review
marcinostrouch Feb 21, 2019
4a7df56
Bump React to 16.8.3 (#1724)
gaearon Feb 21, 2019
81e1b2e
Translated 'Thinking in React' page (#15)
marcinostrouch Feb 21, 2019
994583b
Merge pull request #1549 from natusaspire/fix/blog_post_typo
lex111 Feb 21, 2019
abf2c97
Merge pull request #1637 from prashant-andani/master
lex111 Feb 21, 2019
1a625b7
Merge branch 'master' into httpsify
lex111 Feb 21, 2019
d432954
Merge pull request #1644 from mgol/httpsify
lex111 Feb 21, 2019
927a44a
fix(remove-unused-var): Unused variable ReactDOM removed
nutboltu Feb 22, 2019
7ed776e
Merge pull request #1051 from ghost/fix-typos
saranshkataria Feb 22, 2019
e7a2865
Merge pull request #1728 from nutboltu/master
lex111 Feb 22, 2019
737d007
Merge pull request #539 from Ediiik/patch-1
lex111 Feb 22, 2019
d615c5b
Merge pull request #1317 from tusharkhatiwada/typo-hooks-faq
lex111 Feb 22, 2019
36a11e0
merging all conflicts
Feb 22, 2019
e827878
Update already translated files
Feb 22, 2019
b43e2d7
Merge pull request #26 from reactjs/sync-d615c5b7
jakubdrozdek Feb 22, 2019
fa43b93
Adding first two steps
marcinostrouch Feb 16, 2019
e6dfa6b
Finishing step 3
marcinostrouch Feb 18, 2019
fd7c876
Adding Step 4
marcinostrouch Feb 18, 2019
7338ad5
Adding intro
marcinostrouch Feb 19, 2019
deb3f22
Adding Zalecane zestawy
marcinostrouch Feb 19, 2019
0929d8b
Adding deleted link
marcinostrouch Feb 19, 2019
dea253b
Adding Create React App
marcinostrouch Feb 19, 2019
20e2783
Finishing with Create React App
marcinostrouch Feb 19, 2019
9a98c21
Adding Next.js
marcinostrouch Feb 21, 2019
a052287
Adding Gatsby
marcinostrouch Feb 21, 2019
f69ddf0
Adding Neutrino and nwb
marcinostrouch Feb 21, 2019
ebfb314
Adding Parcel
marcinostrouch Feb 21, 2019
f0abb92
Adding Razzle
marcinostrouch Feb 21, 2019
8f86292
Adding Creating a Toolchain from Scratch
marcinostrouch Feb 21, 2019
f27e884
Pre-review
marcinostrouch Feb 21, 2019
e9e155d
Merge branch 'create-a-new-react-app' of github.com:marcinostrouch/pl…
marcinostrouch Feb 23, 2019
9f900b8
Incorporating Jakub's suggestions
marcinostrouch Feb 23, 2019
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 19 additions & 19 deletions content/docs/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) pr
The following WCAG checklists provide an overview:

- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)

### WAI-ARIA {#wai-aria}

Expand Down Expand Up @@ -114,7 +114,7 @@ Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled
The following resources show us how to do this:

- [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
- [WebAIM shows us how to label elements](http://webaim.org/techniques/forms/controls)
- [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
- [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)

Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
Expand All @@ -129,13 +129,13 @@ Although these standard HTML practices can be directly used in React, note that
Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:

- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
- [WebAIM looks at form validation](http://webaim.org/techniques/formvalidation/)
- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)

## Focus Control {#focus-control}

Ensure that your web application can be fully operated with the keyboard only:

- [WebAIM talks about keyboard accessibility](http://webaim.org/techniques/keyboard/)
- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)

### Keyboard focus and focus outline {#keyboard-focus-and-focus-outline}

Expand All @@ -152,13 +152,13 @@ Provide a mechanism to allow users to skip past navigation sections in your appl
Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
internal page anchors and some styling:

- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)

Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.

Read more about the use of these elements to enhance accessibility here:

- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
- [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)

### Programmatically managing focus {#programmatically-managing-focus}

Expand Down Expand Up @@ -387,7 +387,7 @@ These are toolboxes filled with HTML attributes that are fully supported in JSX
Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:

- [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
- [Inclusive Components](https://inclusive-components.design/)

## Other Points for Consideration {#other-points-for-consideration}
Expand All @@ -396,7 +396,7 @@ Each type of widget has a specific design pattern and is expected to function in

Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:

- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
- [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)

### Setting the document title {#setting-the-document-title}

Expand All @@ -412,15 +412,15 @@ Ensure that all readable text on your website has sufficient color contrast to r

- [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
- [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
- [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)

It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](http://jxnblk.com/colorable/).
It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).

Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.

If you want to extend your contrast testing abilities you can use these tools:

- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
- [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
- [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)

## Development and Testing Tools {#development-and-testing-tools}
Expand Down Expand Up @@ -471,7 +471,7 @@ You can also use the [react-axe](https://github.com/dylanb/react-axe) module to

#### WebAIM WAVE {#webaim-wave}

The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.

#### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}

Expand All @@ -498,7 +498,7 @@ Please note that browser / screen reader combinations matter. It is recommended

Refer to the following guides on how to best use NVDA:

- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
- [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
- [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)

#### VoiceOver in Safari {#voiceover-in-safari}
Expand All @@ -507,26 +507,26 @@ VoiceOver is an integrated screen reader on Apple devices.

Refer to the following guides on how activate and use VoiceOver:

- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
- [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
- [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)

#### JAWS in Internet Explorer {#jaws-in-internet-explorer}

[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) or JAWS, is a prolifically used screen reader on Windows.
[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.

Refer to the following guides on how to best use JAWS:

- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
- [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
- [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)

### Other Screen Readers {#other-screen-readers}

#### ChromeVox in Google Chrome {#chromevox-in-google-chrome}

[ChromeVox](http://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.

Refer to the following guides on how best to use ChromeVox:

- [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html)
- [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)
4 changes: 2 additions & 2 deletions content/docs/add-react-to-a-website.md
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ return (

These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries.

You can play with JSX using [this online converter](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
You can play with JSX using [this online converter](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).

### Quickly Try JSX {#quickly-try-jsx}

Expand Down Expand Up @@ -197,6 +197,6 @@ Don't wait for it to finish -- this command starts an automated watcher for JSX.

If you now create a file called `src/like_button.js` with this **[JSX starter code](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, the watcher will create a preprocessed `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.

As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](http://babeljs.io/docs/en/babel-cli/).
As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](https://babeljs.io/docs/en/babel-cli/).

If you notice that you're getting comfortable with build tools and want them to do more for you, [the next section](/docs/create-a-new-react-app.html) describes some of the most popular and approachable toolchains. If not -- those script tags will do just fine!
4 changes: 2 additions & 2 deletions content/docs/addons-perf.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf`
See these articles for an introduction to React performance tooling:

- ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
- ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/)
- ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/)
- ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/)
- ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/)

### Development vs. Production Builds {#development-vs-production-builds}

Expand Down
2 changes: 1 addition & 1 deletion content/docs/addons-shallow-renderer.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ Shallow testing currently has some limitations, namely not supporting refs.

> Note:
>
> We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
> We also recommend checking out Enzyme's [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.

## Reference {#reference}

Expand Down
4 changes: 2 additions & 2 deletions content/docs/addons-test-utils.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm

## Overview {#overview}

`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content).
`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react).

> Note:
>
> We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do.
>
> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.

- [`act()`](#act)
- [`mockComponent()`](#mockcomponent)
Expand Down
4 changes: 2 additions & 2 deletions content/docs/addons-update.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm

React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.

Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.

### The Main Idea {#the-main-idea}

Expand Down Expand Up @@ -67,7 +67,7 @@ const newData = update(myData, {
});
```

While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.

The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.

Expand Down
2 changes: 1 addition & 1 deletion content/docs/code-splitting.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
If you're setting up Webpack yourself, you'll probably want to read Webpack's
[guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).

When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can
When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can
parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).

## `React.lazy` {#reactlazy}
Expand Down
4 changes: 2 additions & 2 deletions content/docs/codebase-overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -155,7 +155,7 @@ There are multiple injection points in the codebase. In the future, we intend to

### Multiple Packages {#multiple-packages}

React is a [monorepo](http://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.

### React Core {#react-core}

Expand All @@ -171,7 +171,7 @@ The code for React core is located in [`packages/react`](https://github.com/face

### Renderers {#renderers}

React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](http://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.

**Renderers manage how a React tree turns into the underlying platform calls.**

Expand Down
Loading